/*
  学习目标：纯组件  
+ 纯组件：`React.PureComponent` 与 `React.Component `功能相似
+ 区别：PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较
+ 原理：纯组件内部通过分别 对比 前后两次 props 和 state 的值，来决定是否重新渲染组件

总结：**只有在性能优化的时候可能会用到纯组件，不要所有的组件都使用纯组件，因为纯组件需要消耗性能进行对比**
*/
import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 0,
        mag: ''
    };

    handleClick = () => {
        this.setState({ count: this.state.count + 1 });
    };
    handleClickMsg = () => {
        this.setState({ mag: this.state.mag + 1 });
    };
    render() {
        // console.log('只执行一次');
        return (
            <div>
                <h1>数量： {this.state.count}</h1>
                <button onClick={this.handleClick}>点我修改数量</button>
                <button onClick={this.handleClickMsg}>点我修改msg</button>
                <Footer count={this.state.count}></Footer>
            </div>
        )
    }
}
class Footer extends React.PureComponent {
    // shouldComponentUpdate(nextProps) {
    //     // shouldComponentUpdate在render之前执行，this.props.count代表更新前的旧值
    //     console.log('更新前的旧值', this.props.count);
    //     console.log('新值', (nextProps.count))
    //     // 比较有效的props更新，返回false表示不允许更新
    //     return this.props.count !== nextProps.count
    // }
    render() {
        console.log('更新了');
        const { count } = this.props
        return <div>我是Footer:{count}</div>;
    }
}